<template>
    <div class="boss">
        <div class="box">
            <span>输入搜索</span>
            <el-input v-model="input" placeholder="输入上传人" @blur="search"></el-input>
        </div>
        <div class="date">
            <span class="demonstration">上传时间</span>
            <div class="block">
                <el-date-picker v-model="value1" type="date" placeholder="开始日期"></el-date-picker>
            </div>
            <p>-</p>
            <div class="block">
                <el-date-picker v-model="value2" type="date" placeholder="结束日期"></el-date-picker>
            </div>
            <el-button type="primary" @click="searchByTime">搜索</el-button>
        </div>
        <el-button @click="again">重置</el-button>
        <el-dropdown>
            <span class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon--right"></i> 高级筛选
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>上架</el-dropdown-item>
                <el-dropdown-item>下架</el-dropdown-item>
                <el-dropdown-item>上传人</el-dropdown-item>
                <el-dropdown-item>课程名称</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
import eventBus from "../../../utils/eventBus";
export default {
    // mounted() {
    //   eventBus.$on("pagetime", this.sendobj);
    // },
    methods: {
        // sendobj() {
        //   var obj = { value1: this.value1, value2: this.value2 };
        //   this.$emit("sendnews", obj);
        // },
        searchByTime() {
            var obj = { value1: this.value1, value2: this.value2 };
            this.$emit("searchByTime", obj);
        },
        search() {
            this.$emit("search", this.input);
        },
        again() {
            this.input = "";
            this.value1 = "";
            this.value2 = "";
            this.$emit("Reset");
        },
    },
    data() {
        return {
            input: "",
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },
            value1: "",
            value2: "",
        };
    },
};
</script>

<style lang="less" scoped>
.boss {
    .el-dropdown-link {
        color: #409eff;
    }
    span {
        font-weight: 600;
    }
    font-size: 16px;
    background-color: #fff;
    width: 100%;
    height: 62px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .el-dropdown-link {
        cursor: pointer;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .box {
        background-color: #fff;
        width: 300px;
        .el-input {
            width: 200px;
        }
        align-items: center;
        display: flex;
        justify-content: space-around;
    }
    .date {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .block {
            margin-left: 15px;
            margin-right: 15px;
        }
    }
}
</style>